<template>
  <div class="layout" id="admin" :class="{'layout-hide-text':fold}">
    <Row type="flex" class="admin">
      <Col :span="fold?1:3" class="layout-menu-left">
        <Menu
          active-name="1"
          theme="dark"
          width="auto"
          :active-name="route.path"
          @on-select="select"
        >
          <div class="layout-logo-left"></div>
          <template v-for="item in menu">
            <Submenu :name="item.path" v-if="item.children">
              <template slot="title">
                <Icon :type="item.icon" :size="iconSize"></Icon>
                <span class="layout-text">{{item.name}}</span>
              </template>
              <MenuItem :name="child.path" v-for="child in item.children" :key="child.path">
                <Icon :type="child.icon" :size="iconSize"></Icon>
                <span class="layout-text">{{child.name}}</span>
              </MenuItem>
            </Submenu>

            <MenuItem :name="item.path" v-if="!item.children">
              <Icon :type="item.icon" :size="iconSize"></Icon>
              <span class="layout-text">{{item.name}}</span>
            </MenuItem>
          </template>
        </Menu>
      </Col>
      <Col :span="fold?23:21" class="layout-rignt">
        <div class="layout-header">
          <Row>
            <Col span="12" class="layout-header-left">
              <Button type="text" @click="toggleClick">
                <Icon type="navicon" size="32"></Icon>
              </Button>
            </Col>
            <Col span="12" class="layout-header-right">
              <a class="home" target="_blank" href="/">
                <Icon type="home"></Icon>
              </a>
              <Dropdown trigger="click" @on-click="dropdownClick">
                <a href="javascript:void(0)">
                  {{ userInfo && userInfo.username}}
                  <Icon type="arrow-down-b"></Icon>
                </a>
                <DropdownMenu slot="list">
                  <DropdownItem name="userInfo">个人资料</DropdownItem>
                  <DropdownItem name="loginOut">退出后台</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <Avatar :src="userInfo && userInfo.avator" size="large"/>
            </Col>
          </Row>
        </div>
        <div class="layout-breadcrumb">
          <Breadcrumb>
            <BreadcrumbItem v-if="breadcrumb[0]">{{breadcrumb[0]}}</BreadcrumbItem>
            <BreadcrumbItem v-if="breadcrumb[1]">{{breadcrumb[1]}}</BreadcrumbItem>
            <BreadcrumbItem v-if="breadcrumb[2]">{{breadcrumb[2]}}</BreadcrumbItem>
          </Breadcrumb>
        </div>
        <div class="layout-content">
          <div class="layout-content-main">
            <router-view></router-view>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
  import {user} from "@/api";
  import "@/assets/css/admin.css";
  import {
    Avatar,
    Breadcrumb,
    BreadcrumbItem,
    Button,
    Card,
    Col,
    Dropdown,
    DropdownItem,
    DropdownMenu,
    Icon,
    Menu,
    MenuItem,
    Modal,
    Row,
    Submenu,
    Switch,
    Tag
  } from "iview";
  import "iview/dist/styles/iview.css";
  import Vue from "vue";
  import {mapActions, mapState} from 'vuex'

  Vue.component("Button", Button);
  Vue.component("Tag", Tag);
  Vue.component("Modal", Modal);
  Vue.component("i-switch", Switch);
  export default {
    components: {
      Row,
      Col,
      Menu,
      DropdownMenu,
      DropdownItem,
      Breadcrumb,
      BreadcrumbItem,
      Card,
      Dropdown,
      Icon,
      Submenu,
      MenuItem,
      Button,
      Avatar,
      Tag,
      Modal
    },
    data() {
      return {
        userInfo: {},
        fold: this.$store.getters['user/getMenu'].fold,
        //菜单数据
        // TODO：需要优化，这样写太丑
        menu: [
          {
            name: "工程监理",
            path: "/supervision/project/list",
            //icon: "ios-alarm-outline",
            children: [
              {
                name: "工程列表",
                path: "/supervision/project/list",
                //icon: "ios-people"
              },
              //{
              //  name: "工程信息编辑",
              //  path: "/supervision/project/save",
              //  //icon: "ios-people"
              //}
            ]
          },
          {
            name: "控制台",
            path: "/home",
            //icon: "home"
          },
          {
            name: "Blog",
            path: "/blog/content/list",
            //icon: "document",
            children: [
              {
                name: "内容管理",
                path: "/blog/content/list",
                //icon: "document"
              },
              {
                name: "页面管理",
                path: "/blog/page/list",
                //icon: "ios-paper"
              },
              {
                name: "评论管理",
                path: "/blog/comment/list",
                //icon: "chatbubbles"
              },
              {
                name: "分类管理",
                path: "/blog/category/list",
                //icon: "shuffle"
              },
              {
                name: "标签管理",
                path: "/blog/tag/list",
                //icon: "pricetags"
              }
            ]
          },
          {
            name: "权限管理",
            path: "/ucenter/user/list",
            //icon: "ios-alarm-outline",
            children: [
              {
                name: "用户管理",
                path: "/ucenter/user/list",
                //icon: "ios-people"
              },
              {
                name: "角色管理",
                path: "/ucenter/role/list",
                //icon: "ios-people"
              }
            ]
          },
          {
            name: "系统管理",
            path: "/config",
            //icon: "ios-gear",
            children: [
              {
                name: "系统设置",
                path: "/config",
                //icon: "ios-gear"
              },
              {
                name: "地区设置",
                path: "/district/list",
                //icon: "ios-gear"
              },
              {
                name: "高校信息",
                path: "/college/list",
                //icon: "ios-gear"
              },
              {
                name: "图片管理",
                path: "/image/list",
                //icon: "images"
              }
            ]
          }
        ]
      };
    },
    computed: {
      ...mapState({
        hasLogin:'hasLogin',
        route: state => state.route,
      }),

      iconSize() {
        return this.fold ? 24 : 14;
      },
      breadcrumb() {
        let breadcrumbs = this.route.path.split("/");
        let _breadcrumb = {
          admin: "后台",
          home: "控制台",
          content: "内容",
          category: "分类",
          page: "页面",
          comment: "评论",
          tag: "标签",
          save: "编辑",
          list: "列表",
          config: "设置",
          blog: "博客",
          ucenter: "用户中心",
          user: "用户"
        };
        let arr = [];
        for (const i in breadcrumbs) {
          let key = breadcrumbs[i];
          if(key) {
            arr.push(_breadcrumb[key] ? _breadcrumb[key] : "");
          }
        }
        return arr;
      },

    },
    async mounted() {
      //this.getUserInfo();
      if(this.hasLogin) {
        this.userInfo = await this.getUserInfo();
        console.log(this.userInfo);
      }
    },
    methods: {
      //...mapActions(['getUserInfo', 'logout']),
      ...mapActions({
        getUserInfo: 'user/getUserInfo',
        logout: 'logout'
      }),

      //getUserInfo() {
      //  user.getInfoByName(this.$store.state.admin.username).then(res => {
      //    //this.$store.commit("setUserInfo", res.data);
      //    if (res.errno ===0){
      //      this.userInfo = res.data;
      //    }
      //  }).catch(err=>{
      //    this.$store.commit("clearToken");
      //    this.$router.replace("/login");
      //  });
      //},
      toggleClick() {
        this.fold = !this.fold;
        this.$store.commit("user/setMenuFlod", this.fold);
      },
      select(name) {
        this.$router.push(name);
      },
      //loginOut() {
      //  this.logout();
      //  this.$store.commit("clearToken");
      //  this.$router.push("/login");
      //},
      dropdownClick(name) {
        if(name === "loginOut") {
          //this.loginOut();
          this.logout();
          this.$store.commit("token/clearToken");
          this.$router.push("/login");
        }
        if(name === "userInfo") {
          this.$router.push("/ucenter/user/info");
        }
      }
    }
  };
</script>
